<template>
  <div>
    <!--    提示头-->
    <el-alert
      show-icon
      title="注意：只允许为第三级分类设置相关参数！"
      type="warning">
    </el-alert>
    <!--三级菜单-->
    <el-form ref="ruleForm" :model="ruleForm" class="demo-ruleForm">
      <el-form-item class="mb40px" label="选择商品分类：">
        <el-cascader
          v-if="isShow"
          v-model="isArrStr"
          :options="options"
          :props="{
                expandTrigger: 'hover',
                value:'cat_id',
                label:'cat_name'
              }"
          @change="handleChange">

        </el-cascader>
      </el-form-item>
    </el-form>
    <!--标签页-->
    <ParamsTabs
      @getCategoriesManyList="getCategoriesManyList"
      @getCategoriesOnlyList="getCategoriesOnlyList"
    ></ParamsTabs>
  </div>
</template>

<script>
import { getCategories, getCategoriesMany, getCategoriesOnly } from '@/api/commodity'
import ParamsTabs from '@/views/commodity/components/ParamsTabs'
import { createNamespacedHelpers } from 'vuex'

const { mapMutations } = createNamespacedHelpers('params')

export default {
  name: 'params',
  data () {
    return {
      isShow: true,
      options: [],
      ruleForm: {
        goods_cat: ''
      },
      isArrStr: []
    }
  },
  methods: {
    ...mapMutations(['putManyList', 'putOnlyList', 'putId']),
    // 当选择三级项目时触发
    handleChange (value) {
      // console.log(value.at(-1))
      if (value.length === 3) {
        this.ruleForm.goods_cat = value.join(',')
        this.putId(value.at(-1))
        // 请求动态与静态列表参数
        this.getCategoriesManyList(value.at(-1))
        this.getCategoriesOnlyList(value.at(-1))
      } else {
        this.$message({
          type: 'error',
          message: '必须选择有三级分类的项目'
        })
        // 将选择的id改为之前选择的id
        this.isArrStr = this.ruleForm.goods_cat.split(',').map(item => item * 1)
      }
    },
    // 获得商品分类 级联选择器
    async getCategoriesList () {
      try {
        const res = await getCategories()
        if (res.meta.status === 200) {
          // console.log(res.data)
          this.options = res.data
        } else {
          this.$message(res.meta.msg)
        }
      } catch {
        this.$message('商品分类列表初始化失败')
      }
    },
    // 获取动态参数列表
    async getCategoriesManyList (id) {
      const res = await getCategoriesMany(id)
      // console.log(res.data, 1)
      this.putManyList(res.data)
    },
    // 获取静态参数列表
    async getCategoriesOnlyList (id) {
      const res = await getCategoriesOnly(id)
      // console.log(res.data, 2)
      this.putOnlyList(res.data)
    }
  },
  created () {
    this.getCategoriesList()
  },
  components: {
    ParamsTabs
  }
}
</script>

<style scoped>

</style>
